<template>
	<view>
		<!-- 横向导航栏 -->
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" v-for="(item,index) in tablist" :key="index" @tap="tabSelect" :data-id="index">
					<view class="cu-bar justify-center bg-white">
						<view class="action sub-title">
							<text :class="index==TabCur?'text-xl text-bold text-green':''">{{item.name}}</text>
							<text :class="index==TabCur?'bg-green':''"></text>
							<!-- last-child选择器-->
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="VerticalBox">
			<!-- 纵向导航栏 -->
			<scroll-view class="VerticalNav nav bagcolor scroll" scroll-y scroll-with-animation :scroll-top="verticalNavTop">
				<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in list" :key="index" @tap="TabSelect"
				 :data-id="index">
					{{item.name}}
				</view>
			</scroll-view>
			<!-- 纵向导航栏内容 -->
			<scroll-view class="VerticalMain scroll" scroll-y scroll-with-animation @scroll="VerticalMain">
				<view class="padding-top padding-lr" :class="xians?'xian':''">
					<view class="cu-list menu-avatar">
						<view class="cu-item cur" v-for="(item,index) in pageContent.rows" :key="index">
							<view class="cu-avatar radius lg">
								<image :src=" htp + item.restItems.itemImg " mode=""></image>
								<!-- <view class="cu-tag badge"></view> -->
							</view>
							<view class="contents">
								<view>
									<text class="textCut">{{item.mealClassName}}</text>
								</view>
								<view class="text-gray text-sm flex">
									<text class="text-red">￥{{item.price}}</text>
								</view>
								<view class="">
									<view class="cu-tag round bg-orange sm">荤菜{{item.meatNumber}},素菜{{item.elementNumber}},主食1</view>
								</view>
							</view>
							<view class="action">
								<view class=" bg-green text_btn" @tap="specifications(item.id)" data-target="RadioModal">选规格</view>
							</view>
						</view>
						<view class="cu-item cur" style="opacity:0;">
						</view>
					</view>
				</view>
				<view class="padding-top padding-lr" :class="!xians?'xian':''">
					<view class="cu-list menu-avatar">
						<view class="cu-item cur" v-for="(iten,index) in details" :key="index">
							<view class="cu-avatar radius lg" v-for="inte in iten.restItems">
								<image :src=" htp + inte.itemImg " mode=""></image>
								<!-- <view class="cu-tag badge"></view> -->
							</view>
							<view class="contentz">
								<view class="contentz_top">
									<text class="textCut">{{iten.foodName}}</text>
									<view class="cu-tag round bg-orange sm">{{itex.name}}</view>
								</view>
								<view class="text-gray text-sm flex" v-for="inte in iten.restItems">
									<text class="text-red">热销：{{inte.totalNumber}}</text>
								</view>
								<view class="text-gray text-sm flex" v-for="inte in iten.restItems">
									<text class="">剩余份数：{{inte.def1}}</text>
								</view>
								<view class="text-gray text-sm flex">
									<text class="text-red">￥{{iten.price}}</text>
								</view>
							</view>
							<view class="action_number">
								<button class="bg_border cu-btn lg textbtn add" @tap="Less($event,index,iten.foodName,iten.price,iten.foodId,1)">-</button>
								<view class="action_text">
									<text v-if="iten.meatNumber > 0">{{ iten.meatNumber }}</text>
									<text v-else>0</text>
								</view>
								<button class="bg-green cu-btn  lg textbtn add" @tap="Less($event,index,iten.foodName,iten.price,iten.foodId,2)">+</button>
							</view>
						</view>
						<view class="cu-item cur" style="opacity:0;">
						</view>
					</view>

				</view>
			</scroll-view>
		</view>
		<view class="carts">			
			<view class="showModal_data" @tap="showModal" data-target="bottomModal">
				<view class="cu-tag badge" @myshoppingNumber='shoppingNumber'>{{dishesLens}}</view>
				<view class="cart_height">
					<image id="cart" :src="srcImage" mode="widthFix"></image>
				</view>

				<view class="text-price text-white fontText">{{totalPrice}}</view>
			</view>
			<button class="cartBtn" @tap="submits">{{SubmitButton}}</button>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName == 'bottomModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<shoppingCart ref="shoppingCart" @shut="shut" :callBack="callBack" :ars="ars"></shoppingCart>
			</view>
		</view>
		<flyInCart ref="inCart" :cartBasketRect="cartBasketRect"></flyInCart>
		<view class="cu-modals" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
			<view class="cudialog" v-if="modalName=='RadioModal'" @tap.stop="">
				<view class="PackageDetails">
					<PackageDetails @arrs="arrs" @callBackInfo="callBackInfo" @shuts="shuts" @PackagePricex="PackagePricex"
					 :stapleFood="stapleFood" :meatDishes="meatDishes" :PackagePrice="PackagePrice" :details="details" :idx="id"
					 :elementNumber="elementNumber" :meatNumber="meatNumber" :mealName="mealName" :itemRanges="itemRanges"
					 :detailsName="detailsName"></PackageDetails>
				</view>
			</view>
		</view>
		<view class="cu-modalse" :class="modalNames=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
					<view class="action" @tap="cancel">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					您还没有登录，请先登录在下单
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn bg-green margin-left" @tap="determine">点击登录</button>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//  加入购物车动画组件
	import flyInCart from '@/components/flyInCart.vue'
	import ypNumberBox from "@/components/yp-number-box/yp-number-box.vue"
	import PackageDetails from '../../components/PackageDetails.vue'
	import shoppingCart from '../../components/shopping-cart.vue'
	import { mapState } from 'vuex'
	export default {
		components: {
			shoppingCart,
			PackageDetails,
			flyInCart,
			ypNumberBox
		},

		data() {
			return {
				SubmitButton: "下单", //提交按钮的文字
				srcImage: "cloud://shiheji-5gkjlvup36de14c2.7368-shiheji-5gkjlvup36de14c2-1304241660/image/cart.png",
				modalNames: null,
				TF: "",
				msgFormSon: "",
				cartBasketRect: {}, //购物车位置
				SinglePointAmount: 0,
				money: null,
				itemRanges: 2,
				mealName: null,
				callBackarrLength: 0, //套餐数组长度
				dishesLensx: 0, //购物车的数量
				foodsid: null,
				SinglePoint: null,
				addto: true,
				elementNumber: null, //素菜数量
				meatNumber: null, //肉菜数量
				stapleFood: [], //主食信息
				meatDishes: [], //套餐内容
				PackagePrice: 0, //套餐价格
				details: [], //获取套餐
				detailsName: '', //套餐名称
				ars: null, //套餐价格
				id: '',
				callBackArr: [], //套餐数组
				callBack: {}, //传送过来的套餐详细信息
				specification: false,
				PackageDetails: false, //套餐详情
				totalPrices: 0,
				modalName: null,
				// tab导航
				tablist: [{
						name: "早餐"
					},
					{
						name: "午餐"
					},
					{
						name: "下午茶"
					},
					{
						name: "晚餐"
					}
				],
				list: ["套餐", "单点", "轻食", "三明治", "饮品"], //侧边导航栏
				TabCur: 1, //横向导航栏
				scrollLeft: 0,
				tabCur: 0, //纵向导航栏
				mainCur: 0,
				verticalNavTop: 0,
				load: true,
				xians: true,
				classCode: 2, //纵向
				itemRange: 1, //横向
				pageContent: '', //页面内容
				state: 0,
				foods: [],
				isClick: true,
				isReserve:''

			};
		},
		created() {
			this.selectQueryRestItem()
		},
		onShow() {
			this.selectTable()
			this.selectShoppingCat()	
			this.Brunch_switch()
		},
		onLoad(options) {
			this.selecFoodList()
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.listNew()
			this.state = options.state;
		},
		onReady() {
			uni.hideLoading()
			const self = this
			let q = uni.createSelectorQuery()
			setTimeout(function() {
				q.select('#cart').boundingClientRect(data => {
					self.cartBasketRect = data
				}).exec();
			}, 100)
		},
		onPullDownRefresh() {
			this.selectTable()
			this.selectShoppingCat()
			this.selectQueryRestItem()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1500);
		},
		onHide() {
			// this.modalNames = null;
			// this.modalName = null;
		},
		onUnload(){
			this.modalNames = null;
			this.modalName = null;
			
		},
		computed: {
			...mapState(['openid','htp']),
			//购物车数量
			dishesLens() {
				return this.dishesLensx
			},
			//总价
			totalPrice() {
				let num = 0
				num = this.SinglePointAmount
				return num.toFixed(2)
			}
		},
		methods: {
			determine(e) {
				this.modalNames = null
				uni.navigateTo({
					url: '../Login/login'
				})
			},
			cancel(e) {
				this.modalNames = null

			},
			listNew() {
				let lists = this.list
				let list = [{}];
				for (let i = 0; i < lists.length; i++) {
					list[i] = {};
					list[i].name = lists[i];
					list[i].id = i;
				}
				this.list = list;
			},
			shoppingNumber(res) {
				this.dishesLens = res
			},
			//列表详情
			selectTable() {
				this.request.selectTable({
					isReserve: this.isReserve,
					itemRange: this.classCode,
				}).then(res => {
					this.pageContent = res
				})
			},
			//详细信息
			selectQueryRestItem() {	
				let mealId = this.id
				this.request.selectQueryRestItem({
					classCode: this.itemRange,
					itemRange: this.classCode,
					mealId: mealId
				}).then(res => {
					let the = this
					let OtherDishes = res.filter((item) => {
						return item.foodName !== null
					})
					OtherDishes = OtherDishes.filter((item) => {
						return item.foodId !== "27"
					})
					this.details = OtherDishes
					let meatdishes = ''
					let PackagePrice = ''
					let elementNumber = ''
					let meatNumber = ''
					let mealName = '' //套餐名称
					let typelenges = []
					for (let i = 0, len = res.length; i < len; i++) {
						PackagePrice = res[i].price
						meatdishes = res[i].restItems
						elementNumber = res[i].elementNumber
						meatNumber = res[i].meatNumber
						mealName = res[i].mealClassName
					}
					this.PackagePrice = PackagePrice
					this.meatDishes = meatdishes
					this.elementNumber = elementNumber
					this.meatNumber = meatNumber
					this.mealName = mealName
					this.detailsName = mealName
				})
				this.id = ''
			},
			addShopping() {
				let number = 1
				let lists = {
					"primaryMoney": this.money,
					"timeType": this.itemRanges,
					"mealName": this.mealName,
					"state": this.state,
					"oppenId": this.openid,
					"foodId": this.foodsid,
					"number": number,
					"consult":this.consult
				}
				let list = JSON.stringify(lists)
				this.request.addShop(
					list
				).then(res => {
					this.selectShoppingCat()
					this.TodaysDishesID()
				})
				this.modalName = null
			},
			//选规格
			specifications(id) {
				if (this.openid != ' ') {} else {
					this.modalNames = "DialogModal1"
					return false
				}
				this.id = id
				this.selectQueryRestItem()
				this.modalName = "RadioModal"

			},
			//查询购物车
			selectShoppingCat() {;
				this.request.selectShoppingCat({
					oppenId: this.openid,
				}).then(res => {
					console.log(res)
					//购物车的信息
					this.ShoppingCartInformation = res
					let SinglePoint = res.filter((item) => {
						return item.id == this.foodsid
					})
					this.SinglePoint = SinglePoint
					let length = res.length

					let nux = res.map((item) => {
						return item.number
					})
					let nuz = res.map((item) => {
						return item.total
					})

					let nuxArr = nux.reduce((preVal, curVal) => {
						return Number(preVal) + Number(curVal)
					}, [])
					let nuzArr = nuz.reduce((preVal, curVal) => {
						return Number(preVal) + Number(curVal)
					}, [])
					this.dishesLensx = nuxArr
					this.SinglePointAmount = nuzArr
				})
			},
			//购物车状态
			TodaysDishesID() {
				if (this.ShoppingCartInformation.length == 1) {
					this.dishesLensx = 0
					this.SinglePointAmount = 0
				} else {}
			},
			//主食信息
			selecFoodList() {
				this.request.selecFoodList({
				}).then(res => {
					this.stapleFood = res
				})
			},
			// 横向导航
			Brunch_switch() {
				if (this.itemRanges == 1) {
					// console.log("早餐")
					this.list = ["套餐", "单点", "轻食", "三明治", "饮品"]
					this.listNew()
				} else {
					this.list = ["套餐", "单点", "轻食", "小吃", "饮品"]
					this.listNew()
				}
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.classCode = Number(e.currentTarget.dataset.id) + 1;
				this.itemRanges = Number(e.currentTarget.dataset.id) + 1;
				this.selectTable()
				this.Brunch_switch()
				this.selectQueryRestItem()
			},
			//纵向导航
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				if (this.mainCur == 0) {
					this.xians = true
				}
				if (this.mainCur > 0) {
					this.xians = false
				}
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
				this.itemRange = Number(e.currentTarget.dataset.id) + 1;
				this.state = Number(e.currentTarget.dataset.id) + 1;
				this.selectQueryRestItem()
			},
			//数量加减
			Less(e, index, foodName, price, id, type) {
				if (this.openid != ' ') {} else {
					this.modalNames = "DialogModal1"
					return false
				}
				let b = this.details[index].restItems[0]
				let a = b.def1
				if(a == 0){
					uni.showModal({
						icon: 'none',
						title: "菜品已售完"
					})
					return false
				}
				if (this.isClick) {
					this.isClick = false;
					setTimeout(() => {
						if (type == 1) {
							this.consult = 2;
							this.foodsid = id;
							this.details[index].meatNumber -= 1;
							this.mealName = foodName
							this.money = price
							this.addShopping();
						}
						if (type == 2) {
							this.consult = 1;
							this.foodsid = id;
							this.details[index].meatNumber += 1;
							this.mealName = foodName
							this.money = price
							this.$refs.inCart.addToCart(e, id);
							this.addShopping();
						}
						this.isClick = true;
					}, 150); //一秒内不能重复点击
				}
			},
			//接受关闭组件传值
			shut(res) {
				this.modalName = res
			},
			shuts(res) {
				this.modalName = res
			},
			//套餐信息
			callBackInfo(res) {
				this.callBack = res
				this.callBackArr.push(res)
				let callBackarrLength = this.callBackArr.length
				this.callBackarrLength = callBackarrLength

				uni.setStorage({
					key: "callBack",
					data: this.callBackArr
				})
			},
			//套餐价格
			PackagePricex(res) {
				this.totalPrices += res
			},
			arrs(res) {
				this.ars = res
			},

			//显示购物车
			showModal(e) {
				this.modalName = "bottomModal"
				this.$refs.shoppingCart.selectShoppingCa();
				this.$refs.shoppingCart.dda();
			},
			//隐藏购物车
			hideModal(e) {
				this.modalName = null
				this.selectQueryRestItem()

			},
			//提交订单
			submits() {
				uni.navigateTo({
					url: '../ShoppingCart/submitOrders'
				})
			},
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
				return false //支付宝小程序暂时不支持双向联动 
				// #endif
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().select(this.list[i].foodIds);
						let tabHeight = null;
						view.fields({
							size: true
						}, data => {
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50
						this.tabCur = this.list[i].id
						return false
					}
				}
			}
		},
	}
</script>
<style>
	page {
		-webkit-overflow-scrolling: unset
	}

	/* #ifdef APP-PLUS */
	.scroll {
		height: calc(100vh - 278upx);
	}

	/* #endif */
	/* #ifdef H5 || MP-WEIXIN */
	.scroll {
		height: calc(100vh - 90upx)
	}

	/* #endif */
	.cu-modals {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 5000;
		opacity: 0;
		outline: 0;
		text-align: center;
		-webkit-transform: scale(1.185);
		transform: scale(1.185);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		background: rgba(0, 0, 0, 0.6);
		-webkit-transition: all 0.3s ease-in-out 0s;
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
		-webkit-transform: translateZ(1px);
		-moz-transform: translateZ(1px);
		-o-transform: translateZ(1px);
		transform: translateZ(1px);
	}

	.cu-list.menu-avatar>.cu-item .content>uni-view:first-child {
		font-size: 26rpx;
	}

	.text_btn {
		width: 88rpx;
		height: 56rpx;
		font-size: 25rpx;
		line-height: 56rpx;
		border-radius: 8rpx;
	}

	image {
		max-width: 100%;
		display: inline-block;
		position: relative;
		z-index: 0;
		max-height: 100%;
	}

	.top_image {
		background-color: #EE7621;
	}

	.bagcolor {
		background-color: #FFFFFF;
	}

	.fixed {
		position: fixed;
		z-index: 99;
	}

	.VerticalNav.nav {
		width: 180upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
	}

	.carts {
		display: table-cell;
		vertical-align: middle;
		width: 96%;
		z-index: 1200;
		position: absolute;
		bottom: 40rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #f37b1d;
		margin: auto;
		border-radius: 40rpx;
		left: 2%;
	}

	.fontText {
		position: absolute;
		left: 26%;
		font-size: 48rpx;
	}

	.cartBtn {
		z-index: 1000;
		border-radius: 0 39rpx 39rpx 0;
		font-size: 30rpx;
		width: 200rpx;
		background: #39B54A;
		position: absolute;
		right: 0;
		color: #FFFFFF;
	}

	.cu-dialog {
		height: auto;
	}

	.cu-tag.badge {
		z-index: 1001;
		top: -20rpx;
		right: 530rpx;
	}

	.PackageDetails {
		width: 100%;
		height: auto;
	}

	.lase {
		margin-bottom: 162rpx;
	}

	.cudialog {
		position: relative;
		display: inline-block;
		margin-left: auto;
		margin-right: auto;
		width: 666rpx;
		max-width: 100%;
		background-color: #f8f8f8;
		border-radius: 10rpx;
		margin-top: 30rpx;
	}

	.content {
		font-size: 34rpx;
	}

	.cu-btn.lg {
		padding: 0;
		height: 45rpx;
		width: 45rpx;
	}

	.padding {
		padding: 0 15rpx 10rpx 15rpx;
	}

	.padding_box {
		padding: 10rpx;
	}

	.textbtn {
		border-radius: 12rpx;
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.imgs {
		height: 129rpx;
	}

	.cu-avatar {
		background-color: #FFFFFF;
	}

	.add:active {
		transform: scale(1.2);
	}

	.action_number {
		display: flex;
		width: 190rpx;
		position: absolute;
		top: 115rpx;
		justify-content: space-around;
		right: 20rpx;
	}

	.action_text {
		line-height: 45rpx;
	}

	.bg_border {
		color: #39b54a;
		background-color: #ffffff;
		border: 1rpx solid #39b54a;
	}

	.cu-bar.tabbar.shop .action {
		width: 250rpx;
	}

	.cu-list.menu-avatar>.cu-item .action {
		width: 110rpx;
		margin-left: 40rpx;
	}

	.cu-list.menu-avatar>.cu-item .action[data-v-bfd085f4] {
		width: 144rpx;
		line-height: 100rpx;
	}

	.action_body {
		height: 70rpx;
		font-size: 35rpx;
		line-height: 70rpx;
		border-bottom: 1rpx solid #F2F2F2;
	}

	.cutn {
		padding: 10rpx;
		height: 49rpx;
		width: 204rpx;
		border-radius: 10rpx;
		font-size: 15px;
		line-height: 30rpx;
		border-radius: 10rpx;
	}

	button {
		margin: 0;
		padding: 0;
		outline: none;
		border-radius: 0;
		background-color: transparent;
		line-height: inherit;
		width: max-content;
	}

	button:after {
		border: none;
	}

	.action_btn {
		margin: 20rpx 0;
		display: flex;
		justify-content: flex-end;
		padding-right: 35rpx;
	}

	.textCut {
		white-space: nowrap;
	}

	.action_show {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		width: 190rpx;
		position: absolute;
		top: 72rpx;
		right: -102rpx;
	}

	.padding-top {
		display: none;
	}

	.xian {
		display: block;
	}

	.contentz {
		position: absolute;
		left: 146rpx;
		width: calc(100% - 96rpx - 60rpx - 120rpx - 20rpx);
		line-height: 35rpx;
	}

	.contentz_top {
		width: 350rpx;
	}

	.contents {
		position: absolute;
		left: 146rpx;
		width: calc(100% - 96rpx - 60rpx - 120rpx - 20rpx);
		line-height: 40rpx;
	}

	.cu-modals.show {
		opacity: 1;
		-webkit-transition-duration: 0.3s;
		transition-duration: 0.3s;
		-webkit-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
		-webkit-transform: translateZ(1px);
		-moz-transform: translateZ(1px);
		-o-transform: translateZ(1px);
		transform: translateZ(1px);

	}

	.showModal_data {
		width: 70%;
	}

	.cart_height {
		width: 160rpx;
		height: 146rpx;
		position: absolute;
		bottom: 0;
		left: 5%;
	}

	.cu-modalse {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1240;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}

	.cu-modalse.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;

	}

	.cu-dialog {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
		/* margin-top: 284rpx; */
		width: 680rpx;
		margin-top: 50%;
		/* align-items: center; */
		max-width: 100%;
		background-color: #f8f8f8;
		border-radius: 10rpx;
		overflow: hidden;
	}
</style>
